<template>
  <view class="main">
    <u-cell-group :border="false">
      <u-cell title="">
        <template #title>
          <u-input v-model="fileInfo.name" placeholder="请输入文件夹名称" border="none" clearable />
        </template>
        <template #value>
          <view @click="show = true" style="width: 90rpx; display: flex; justify-content: flex-end; margin-right: -6rpx">
            <u-icon name="arrow-right" color="#909399" style=""></u-icon>
          </view>
        </template>
      </u-cell>
      <u-cell title="设置封面" isLink @click="uploadImg">
        <template #value>
          <image class="img" :src="fileInfo?.url" mode="aspectFill" />
        </template>
      </u-cell>
      <!-- <u-cell title="默认分类" isLink @click="show = true">
        <template #value> </template>
      </u-cell> -->
    </u-cell-group>
    <view class="box" v-if="id">
      <u-button type="error" @click="delFn">删除</u-button>
      <u-button type="primary" @click="editFn">保存</u-button>
    </view>
    <u-button v-else @click="createFn" style="margin-top: 50rpx" type="primary">完成创建</u-button>
    <u-picker v-if="!id" :show="show" keyName="name" :columns="listInfo" @cancel="show = false" @confirm="selectClick"></u-picker>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const { id } = defineProps<{
  id: string;
}>();
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { createFolder, deleteFolder, editFolder, getDefaultFolderList } from "@/api/cloudStorage";
import { BASE_UPLOADURL } from "@/utils/request";
import { useFilesStore } from "@/stores/files";
const { filesInfo } = useFilesStore();
const show = ref(false);
type listType = { name: string; url: string }[][];
const listInfo = ref<listType>([]);
onMounted(async () => {
  const res = await getDefaultFolderList();
  listInfo.value = [res.data];
  console.log(res);
});
onShow(() => {
  uni.setNavigationBarTitle({
    title: id ? "编辑文件夹" : "新建文件夹",
  });
  if (filesInfo) {
    fileInfo.value = filesInfo;
  }
});
const fileInfo = ref({
  name: "",
  url: "",
});

const createFn = async () => {
  if (!fileInfo.value.url) {
    uni.showToast({
      title: "请上传封面",
      icon: "none",
    });
    return;
  }
  await createFolder(fileInfo.value);
  uni.showToast({
    title: "创建成功",
    icon: "success",
  });
  setTimeout(() => {
    uni.switchTab({
      url: "/pages/cloudStorage/cloudStorage",
    });
  }, 300);
};
const editFn = async () => {
  await editFolder(fileInfo.value);
  uni.showToast({
    title: "修改成功",
    icon: "success",
  });
  setTimeout(() => {
    uni.switchTab({
      url: "/pages/cloudStorage/cloudStorage",
    });
  }, 300);
};
const selectClick = (info: any) => {
  console.log(info);
  fileInfo.value.url = info.value[0].url;
  fileInfo.value.name = info.value[0].name;
  show.value = false;
};
const delFn = () => {
  uni.showModal({
    title: "提示",
    content: "您确定要删除此文件夹吗？",
    success: async function (res) {
      if (res.confirm) {
        await deleteFolder({
          id,
        });
        uni.showToast({
          title: "取消成功",
          icon: "success",
          position: "top",
          success() {
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/cloudStorage/cloudStorage",
              });
            }, 300);
          },
        });
      }
    },
  });
};
const uploadImg = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFilePaths;
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i],
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            console.log(uploadFileRes, "uploadFileRes");
            fileInfo.value.url = JSON.parse(uploadFileRes.data).data.url;
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
        });
      }
    },
  });
};
</script>

<style lang="less" scoped>
@import "../myPage/setting/css/cell-group.scss";

.img {
  border-radius: 0;
  width: 80rpx;
  height: 80rpx;
}
:deep(.u-border-bottom) {
  border-color: #f9f9f9 !important;
  padding-bottom: 30rpx !important;
}
.box {
  display: flex;
  gap: 30rpx;
  margin-top: 50rpx;
}
</style>
